<template>
	<view>
		<view class="add-c">
			<view class="row" v-for="item in addressList" :key="item.id">
				<view class="left" @tap="goOrder(item)">
					<view class="name">
						{{item.name}}
						<view class="moren" v-if="item.defaultStatus==1">
							默认
						</view>
					</view>
					<view class="tel">
						{{item.phoneNumber}}
					</view>
				</view>
				<view class="right">
					<view class="icon" @tap="edit(item)">
						<image src="../../static/icons/edit.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 新增地址 -->
			<view class="add" @tap="add">
				新增地址
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {findAddress} from "../../utils/address/index.js"
	const app = getApp();
	export default {
		data() {
			return {
				addressList:[]
			}
		},
		methods: {
			init(){
				findAddress().then(res=>{
					// console.log(res.map(el=>el.defaultStatus).join(""))
					this.addressList=res.data.items
				})
			},
			add(){
				uni.navigateTo({
					url:"/pages/address/addAddress/addAddress"
				})
			},
			edit(item){
				// console.log(item)
				const items=item
				app.globalData.items=items
				uni.navigateTo({
					url:"/pages/address/editAddress/editAddress"
				})
			},
			goOrder(item){
				
				uni.setStorageSync("address",item)
				uni.navigateBack({
					
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init()
		}
	}
</script>

<style scoped lang="scss">
.add-c{
	width: 90%;
	margin:  0 auto;
	.add{
		position: fixed;
		bottom: 80rpx;
		width: 70%;
		margin: 0 auto;
		height: 80rpx;
		background-color: #354e44;
		border-radius: 80rpx;
		left: 50%;
		margin-left: -35%;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}
	.row{
		width: 94%;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ccc;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			
			flex-wrap: wrap;
			flex-direction: column;
			.name{
				margin-bottom: 20rpx;
				.moren{
					display: inline-block;
					width: 84rpx;
					height: 32rpx;
					font-size: 22rpx;
					    background-color: #354e44;
					    color: #fff;
					 
					    border-radius: 8rpx;
					    margin-left: 20rpx;
						text-align: center;
						line-height: 32rpx;
				}
			}
			.tel{
				font-size: 24rpx;
				color: #999;
			}
		}
		.right{
			flex-shrink: 0;
			align-items: center;
			margin-left: 20rpx;
			.icon{
					width: 80rpx;
				    height: 60rpx;
				    border-left: solid 1rpx #aaa;
				    font-size: 40rpx;
				    color: #777;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						opacity: .8;
					}
			}
		}
	}
	
}
</style>
